@require './config'
@require './code'
@require './custom-blocks'
@require './arrow'
@require './wrapper'
@require './toc'
@require './icons'

html, body
	padding 0
	margin 0
	background-color #fff
body
	// font-family -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
	font-family Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif
	-webkit-font-smoothing antialiased
	-moz-osx-font-smoothing grayscale
	font-size 0.9rem
	// color $textColor
	color #5e6d82
	font-weight 500
	word-wrap break-word
.page
	padding-left $sidebarWidth
.navbar
	position fixed
	z-index 20
	top 0
	left 0
	right 0
	height $navbarHeight
	background-color #fff
	box-sizing border-box
	border-bottom 1px solid $borderColor
.sidebar-mask
	position fixed
	z-index 9
	top 0
	left 0
	width 100vw
	height 100vh
	display none
.sidebar
	font-size 16px
	background-color #fff
	width $sidebarWidth
	position fixed
	z-index 10
	margin 0
	top $navbarHeight
	left 0
	bottom 0
	box-sizing border-box
	border-right 1px solid $borderColor
	overflow-y auto
	&::-webkit-scrollbar
		display none
{$contentClass}:not(.custom)
	@extend $wrapper
	> *:first-child
		margin-top $navbarHeight
	a:hover
		text-decoration underline
	p.demo
		padding 1rem 1.5rem
		border 1px solid #ddd
		border-radius 4px
	img
		max-width 100%
{$contentClass}.custom
	padding 0
	margin 0
	img
		max-width 100%
a
	font-weight 500
	color $accentColor
	text-decoration none
p a code
	font-weight 400
	color $accentColor
kbd
	background #eee
	border solid 0.15rem #ddd
	border-bottom solid 0.25rem #ddd
	border-radius 0.15rem
	padding 0 0.15em
blockquote
	font-size 1rem
	color #999
	border-left 0.2rem solid #dfe2e5
	margin 1rem 0
	padding 0.25rem 0 0.25rem 1rem
	& > p
		margin 0
ul, ol
	padding-left 1.2em
strong
	font-weight 600
h1, h2, h3, h4, h5, h6
	font-weight 600
	line-height 1.25
	color $textColor
	{$contentClass}:not(.custom) > &
		margin-top 0.5rem - $navbarHeight
		padding-top ($navbarHeight + 1rem)
		margin-bottom 0
		&:first-child
			margin-top -1.5rem
			margin-bottom 1rem
			+ p, + pre, + .custom-block
				margin-top 2rem
	&:hover .header-anchor
		opacity 1
h1
	font-size 2.2rem
h2
	font-size 1.65rem
	padding-bottom 0.3rem
	border-bottom 1px solid $borderColor
h3
	font-size 1.35rem
a.header-anchor
	font-size 0.85em
	float left
	margin-left -0.87em
	padding-right 0.23em
	margin-top 0.125em
	opacity 0
	&:hover
		text-decoration none
code, kbd, .line-number
	font-family source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace
p, ul, ol
	line-height 1.7
hr
	border 0
	border-top 1px solid $borderColor
table
	border-collapse collapse
	margin 1rem 0
	display block
	overflow-x auto
tr
	border-top 1px solid #dfe2e5
	&:nth-child(2n)
		background-color #f6f8fa
th, td
	border 1px solid #dfe2e5
	padding 0.6em 1em
.theme-container
	&.sidebar-open
		.sidebar-mask
			display block
	&.no-navbar
		{$contentClass}:not(.custom) > h1, h2, h3, h4, h5, h6
			margin-top 1.5rem
			padding-top 0
		.sidebar
			top 0
@media (min-width: ($MQMobile + 1px))
	.theme-container.no-sidebar
		.sidebar
			display none
		.page
			padding-left 0

@require 'mobile.styl'
